﻿<!DOCTYPE html>
<html>
<head>
<!----------------------------------------------------------
 
	Copyright (c) 2017-2018 Jean-Marc VIGLINO, 
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
	
------------------------------------------------------------>
	<title>ol-ext: Geolocation draw</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="an OL3 interaction to draw using the GPS of your device." />
	<meta name="keywords" content="ol3, interaction, draw, GPS, location, geolocation" />

	<link rel="icon" type="image/png" href="https://openlayers.org/assets/theme/img/logo70.png" />

	<!-- android -->
	<meta name="mobile-web-app-capable" content="yes">
	<!-- iOS -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">
	<link rel="apple-touch-icon" href="https://openlayers.org/assets/theme/img/logo70.png" />
	<link rel="apple-touch-startup-image" href="https://openlayers.org/assets/theme/img/logo70.png" />

	<meta name="format-detection" content="telephone=no" />
	<meta name="msapplication-tap-highlight" content="no" />
	<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
	<!meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

	<!-- Geolocation only works on https -->
	<script>
		if (location.protocol == 'http:' && !/^localhost/.test(location.host))
		{	location.href = window.location.href.replace(/^http:/,"https:");
		}
	</script>

	<link rel="stylesheet" href="../style.css" />

	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

	<!-- Openlayers -->
    <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
	<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- ol-ext -->
    <link rel="stylesheet" href="../../dist/ol-ext.css" />
	<script type="text/javascript" src="../../dist/ol-ext.js"></script>

	<style>
		#map
		{	position: fixed;
			top:2em;
			left:0;
			right:0;
			bottom:0;
			width:auto;
			height: auto;
			margin: 0;
		}
		h1
		{	position: fixed;
			top:0;
			left:0;
			right:0;
			height: 1em;
			font-size: 1.5em;
			padding: 0.2em 0em 0.2em 2em;
		}
		#accuraty
		{	display: block;
			background: #f00;
			height:10px;
			max-width: 200px;
		}
		.options ul
		{	margin:0;
		}
		.options 
		{	position: fixed;
			right: 0;
			bottom: 0;
			margin: 0;
			font-size: 0.8em;
			padding: 0 0.3em;
		}
		.options button
		{	padding: 0.4em 0.5em;
			background: #369;
			color: #fff;
			border:0;
			margin:0.2em 0;
		}
		.info {
			background: #f5f5f5;
			padding: 0.5em;
			margin: 1em 0;
			position: fixed;
			z-index: 2;
			margin: 0.5em 0.5em 0.5em 3em;
			top: 2em;
			overflow: auto;
			max-height: calc(100% - 4em);
		}
		.follow
		{	position:fixed;
			left:1em;
			bottom: 1em;
			background: #369;
			color: #fff;
			padding: 0.5em;
			display: none;
		}
	</style>

</head>
<body >
	<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

	<a href="../../index.html">
		<h1>ol-ext: Geolocation draw</h1>
	</a>
	<div class="info">
		<b style="position:absolute; font-size:1.5em; font-weight:bold; right:0; top:0; padding:0.2em 0.5em; cursor:pointer;" onclick="$(this).parent().hide();">&times;</b>
		The <i>ol.interaction.GeolocationDraw</i> is a draw interaction that use an <i>ol.Geolocation</i>.
		<ul>
			<li>
				<i>setActive(bool)</i> method will start/stop the GPS and draw a location area.
			</li>
			<li>
				<i>start()</i> method will start drawing (registering poisitions).
			</li>
			<li>
				<i>pause()</i> will pause registering locations.
			</li>
			<li>
				<i>stop()</i> method will stop drawing and save the resulting feature in the provided source.
			</li>
		</ul>
		Options:
		<ul>
			<li>
				You can define a <i>minAccuraty</i> overneath the location will be skipped or a <i>condition</i> function 
				to decide if the point should be registered.
			</li>
			<li>
				You can define a <i>tolerance</i> to simplify the resulting geometry.
			</li>
			<li>
				When activated the interaction will follow the GPS position at a defined <i>zoom</i>. 
				You can override this behavior in specifying the <i>followTrack</i> option (can be true | false | auto | position | visible).
			</li>
		</ul>
	</div>

	<!-- Map div -->
	<div id="map"></div>
	<div class="follow" onclick="draw.setFollowTrack('auto');">Re-center</div>

	<div class="options" >
		<h2>Options:</h2>
		<ul>
			<li>
				<input type="radio" name="type" value="Point" /><label> Point</label>
				<input type="radio" name="type" value="LineString" checked="checked" /><label> Line</label>
				<input type="radio" name="type" value="Polygon" /><label> Polygon</label>
			</li>
			<li>
				followTrack:
				<select onchange="draw.setFollowTrack($(this).val()==='true' ? true : $(this).val());">
					<option value="true">true (track at zoom)</option>
					<option value="false">false (don't track)</option>
					<option value="auto">auto (stop on map move)</option>
					<option value="position">position (no zoom)</option>
					<option value="visible">visible (stay on	the map)</option>
				</select>
			</li>
			<li>
				<button onclick="draw.start();">start</button>
				<button onclick="draw.pause();">pause</button>
				<button onclick="draw.stop();">stop</button>
			</li>
			<li>
				Accurraty:
				<div style="border:1px solid #000; width:200px;">
					<div id="accuraty"></div>
				</div>
			</li>
			<li>
				H: <input type="text" id="heading" style="width:3em;"/>
				Z: <input type="text" id="z" style="width:3em;"/>
			</li>
		</ul>
	</div>
	

	<script type="text/javascript">
		$("label").click(function(){ $(this).prev().click(); })
		$('input[name=type]').on('change', function()
		{	draw.set("type", $(this).val());
		});

		// Layers
		var layer = new ol.layer.Tile({ source: new ol.source.OSM() });
		
		// The map
		var map = new ol.Map
			({	target: 'map',
				view: new ol.View
				({	zoom: 5,
					center: [261720, 5951081]
				}),
				controls: ol.control.defaults({ "attribution": false }),
				layers: [layer]
			});

		// New vector layer
		var vector = new ol.layer.Vector(
		{	name: 'Vecteur',
			source: new ol.source.Vector()
		});
		map.addLayer(vector);
		
		var gauge = new ol.control.Gauge({ title:'Accurracy:', max:200 });
		map.addControl(gauge);

		// Draw interaction
		var draw = new ol.interaction.GeolocationDraw(
			{	source: vector.getSource(),
				zoom: 16,
				minAccuracy:10000
			});
		map.addInteraction(draw);

		draw.on("tracking", function(e)
		{	$("#accuraty").width((e.geolocation.getAccuracy()));
			gauge.val(e.geolocation.getAccuracy());
			$("#heading").val(e.geolocation.getHeading());
			$("#z").val(e.geolocation.getAltitude());
		});
		//
		draw.on('follow', function(e)
		{	if (e.following) $(".follow").hide();
			else $(".follow").show();
		});
		// Handle drawing
		draw.on("drawstart", function(e)
		{	
		});
		draw.on("drawend", function(e)
		{	$(".follow").hide();
		});

	</script>

</body>
</html>